<template>
  <div class="milestone-container">
    <el-card class="milestone-card" shadow="hover">
      <div class="header">
        <div class="title-section">
          <h2 class="page-title">
            <el-icon class="title-icon"><Flag /></el-icon>
            节点计划
            <el-tag v-if="props.projectData.project_name" type="primary" size="small" style="margin-left: 10px;">
              {{ props.projectData.project_name }}
            </el-tag>
          </h2>
          <p class="description">
            管理项目关键节点与进度跟踪
            <span v-if="props.projectData.project_id" style="color: #e6a23c; font-weight: 500;">
              (项目编号: {{ props.projectData.project_id }})
            </span>
          </p>
        </div>
        <div class="header-actions">
          <el-button v-if="canAdd" type="primary" @click="openDialog()" class="create-btn">
            <el-icon><Plus /></el-icon>
            添加节点
          </el-button>
          <el-button v-if="canAdd" type="success" @click="addCommonMilestones" class="add-common-btn">
            <el-icon><Plus /></el-icon>
            快速添加常用节点
          </el-button>
          <el-button type="primary" @click="refreshData" class="refresh-btn" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </div>

      <!-- 项目选择 -->
      <div class="project-selector" v-if="!props.projectData.project_id">
        <el-select v-model="selectedProject" placeholder="选择项目" style="width: 300px" @change="handleProjectChange">
          <el-option label="全部项目" value="all" />
          <el-option 
            v-for="project in projectList" 
            :key="project.project_id" 
            :label="project.project_name" 
            :value="project.project_id" 
          />
        </el-select>
      </div>

      <!-- 搜索区域 -->
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索节点名称、项目编号..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <!-- 节点列表 -->
      <el-table
        :data="paginatedMilestoneList"
        stripe
        border
        class="milestone-table"
        v-loading="loading"
        empty-text="暂无节点数据"
      >
        <el-table-column prop="milestone_name" label="节点名称" min-width="150" />
        <el-table-column prop="project_id" label="所属项目" width="120" />
        <el-table-column prop="expected_date" label="计划日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.expected_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="actual_date" label="实际日期" width="120">
          <template #default="scope">
            {{ scope.row.actual_date ? formatDate(scope.row.actual_date) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">
              {{ getStatusText(scope.row) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="完成度" width="120">
          <template #default="scope">
            <el-progress :percentage="getProgress(scope.row)" :status="getProgressStatus(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="节点描述" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right" v-if="hasPermission">
          <template #default="scope">
            <el-button size="small" type="primary" @click="openDialog(scope.row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button size="small" type="success" @click="updateProgress(scope.row)">
              <el-icon><Check /></el-icon>
              更新进度
            </el-button>
            <el-button v-if="canAdd" size="small" type="danger" @click="handleDelete(scope.row.id)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-section" v-if="filteredMilestoneList.length > 0">
        <el-pagination
          :current-page="pagination.page"
          :page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="filteredMilestoneList.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 节点统计 -->
      <div class="milestone-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ milestoneStats.total }}</div>
                <div class="stat-label">总节点数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ milestoneStats.completed }}</div>
                <div class="stat-label">已完成</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ milestoneStats.inProgress }}</div>
                <div class="stat-label">进行中</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ milestoneStats.pending }}</div>
                <div class="stat-label">待开始</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 节点创建/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="form.id ? '编辑节点' : '添加节点'"
      width="600px"
      align-center
    >
      <el-form :model="form" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="节点名称" prop="milestone_name">
          <el-select 
            v-model="form.milestone_name" 
            placeholder="请选择或输入节点名称" 
            style="width: 100%"
            filterable
            allow-create
            default-first-option
            @change="handleMilestoneNameChange"
          >
            <el-option 
              v-for="milestone in predefinedMilestones" 
              :key="milestone.milestone_name" 
              :label="milestone.milestone_name" 
              :value="milestone.milestone_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目" prop="project_id">
          <el-select v-model="form.project_id" placeholder="请选择项目" style="width: 100%" :disabled="!!props.projectData.project_id">
            <el-option 
              v-for="project in projectList" 
              :key="project.project_id" 
              :label="project.project_name" 
              :value="project.project_id" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划日期" prop="expected_date">
          <el-date-picker
            v-model="form.expected_date"
            type="date"
            placeholder="选择计划日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="实际日期" prop="actual_date">
          <el-date-picker
            v-model="form.actual_date"
            type="date"
            placeholder="选择实际完成日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="节点描述" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入节点描述" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 更新进度对话框 -->
    <el-dialog
      v-model="progressDialogVisible"
      title="更新节点进度"
      width="500px"
      align-center
    >
      <el-form :model="progressForm" :rules="progressFormRules" ref="progressFormRef" label-width="100px">
        <el-form-item label="节点名称">
          <el-input v-model="progressForm.milestone_name" disabled />
        </el-form-item>
        <el-form-item label="实际完成日期" prop="actual_date">
          <el-date-picker
            v-model="progressForm.actual_date"
            type="date"
            placeholder="选择实际完成日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="完成状态" prop="status">
          <el-select v-model="progressForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="已完成" value="completed" />
            <el-option label="进行中" value="in_progress" />
            <el-option label="待开始" value="pending" />
            <el-option label="延期" value="delayed" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="progressForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="progressDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleProgressSubmit" :loading="submitLoading">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Flag, Plus, Edit, Check, Delete, Search, Refresh } from '@element-plus/icons-vue'
import { 
  getProjectMilestoneList, 
  getProjectMilestoneListByProjectId,
  createProjectMilestone, 
  updateProjectMilestone, 
  deleteProjectMilestone 
} from '../../api/projectMilestone'
import { getProjectList } from '../../api/project'

// 定义props
const props = defineProps({
  projectId: {
    type: String,
    default: ''
  },
  projectData: {
    type: Object,
    default: () => ({})
  }
})

// 获取当前登录用户信息
const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
const isAdmin = computed(() => currentUser.value.userType === '管理员')

// 检查是否为当前项目的项目经理
const isProjectManager = computed(() => {
  if (!props.projectData || !props.projectData.project_manager) {
    return false
  }
  // 检查当前用户是否为该项目的项目经理
  return currentUser.value.username === props.projectData.project_manager || 
         currentUser.value.userId === props.projectData.project_manager ||
         currentUser.value.id === props.projectData.project_manager
})

// 检查是否有权限操作（只有当前项目的项目经理可以操作）
const hasPermission = computed(() => {
  return isProjectManager.value
})

// 检查是否可以新增和删除（只有当前项目的项目经理可以操作）
const canAdd = computed(() => {
  return isProjectManager.value
})

// 预定义的项目节点数据
const predefinedMilestones = [
  { milestone_name: '公司内部移交', description: '项目从公司内部移交到项目部' },
  { milestone_name: '项目启动会', description: '项目正式启动会议' },
  { milestone_name: '项目开工日期', description: '项目实际开工日期' },
  { milestone_name: '开发完成', description: '软件开发阶段完成' },
  { milestone_name: '测试完成', description: '软件测试阶段完成' },
  { milestone_name: '软件部署', description: '软件部署到生产环境' },
  { milestone_name: '调试完成', description: '系统调试阶段完成' },
  { milestone_name: '项目试运行', description: '项目进入试运行阶段' },
  { milestone_name: '项目验收', description: '项目正式验收' },
  { milestone_name: '质保开始', description: '项目质保期开始' },
  { milestone_name: '质保结束', description: '项目质保期结束' },
  { milestone_name: '项目审计', description: '项目审计完成' },
  { milestone_name: '项目回款', description: '项目回款完成' },
  { milestone_name: '项目结束', description: '项目正式结束' }
]

// 响应式数据
const selectedProject = ref('all')
const milestoneList = ref([])
const projectList = ref([])
const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const progressDialogVisible = ref(false)
const searchKeyword = ref('')
const formRef = ref()
const progressFormRef = ref()

// 分页数据
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 表单数据
const form = ref({
  id: null,
  project_id: '',
  milestone_name: '',
  expected_date: '',
  actual_date: '',
  remark: ''
})

const progressForm = ref({
  id: null,
  milestone_name: '',
  actual_date: '',
  status: '',
  remark: ''
})

// 表单验证规则
const formRules = {
  milestone_name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  project_id: [{ required: true, message: '请选择所属项目', trigger: 'change' }],
  expected_date: [{ required: true, message: '请选择计划日期', trigger: 'change' }]
}

const progressFormRules = {
  actual_date: [{ required: true, message: '请选择实际完成日期', trigger: 'change' }],
  status: [{ required: true, message: '请选择完成状态', trigger: 'change' }]
}

// 过滤后的节点列表
const filteredMilestoneList = computed(() => {
  let filtered = milestoneList.value
  
  // 根据搜索关键词过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(item => 
      item.milestone_name?.toLowerCase().includes(keyword) ||
      item.project_id?.toLowerCase().includes(keyword) ||
      item.remark?.toLowerCase().includes(keyword)
    )
  }
  
  return filtered
})

// 分页后的节点列表
const paginatedMilestoneList = computed(() => {
  const start = (pagination.value.page - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredMilestoneList.value.slice(start, end)
})

// 节点统计数据
const milestoneStats = computed(() => {
  const total = filteredMilestoneList.value.length
  const completed = filteredMilestoneList.value.filter(item => item.actual_date).length
  const inProgress = filteredMilestoneList.value.filter(item => !item.actual_date && new Date(item.expected_date) <= new Date()).length
  const pending = total - completed - inProgress
  
  return { total, completed, inProgress, pending }
})

// 获取状态标签样式
function getStatusTagType(status) {
  const statusMap = {
    'completed': 'success',
    'in_progress': 'primary',
    'pending': 'info',
    'delayed': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
function getStatusText(milestone) {
  if (milestone.actual_date) return '已完成'
  if (new Date(milestone.expected_date) < new Date()) return '延期'
  if (new Date(milestone.expected_date) <= new Date()) return '进行中'
  return '待开始'
}

// 获取进度状态
function getProgress(milestone) {
  if (milestone.actual_date) return 100
  if (new Date(milestone.expected_date) < new Date()) return 50
  if (new Date(milestone.expected_date) <= new Date()) return 75
  return 0
}

// 获取进度状态样式
function getProgressStatus(milestone) {
  if (milestone.actual_date) return 'success'
  if (new Date(milestone.expected_date) < new Date()) return 'exception'
  if (new Date(milestone.expected_date) <= new Date()) return 'warning'
  return ''
}

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 获取项目列表
async function loadProjectList() {
  try {
    const response = await getProjectList({ page: 1, pageSize: 1000 })
    if (response.data && response.data.data) {
      projectList.value = response.data.data
    } else if (Array.isArray(response.data)) {
      projectList.value = response.data
    }
  } catch (error) {
    console.error('获取项目列表失败:', error)
    ElMessage.error('获取项目列表失败')
  }
}

// 加载项目节点列表
async function loadProjectMilestone() {
  loading.value = true
  try {
    const currentProjectId = props.projectData.project_id || props.projectId || selectedProject.value
    
    if (currentProjectId && currentProjectId !== 'all') {
      console.log('加载项目节点，项目ID:', currentProjectId)
      
      const res = await getProjectMilestoneListByProjectId(currentProjectId)
      const allMilestones = Array.isArray(res) ? res : []
      
      // 过滤当前项目的数据
      milestoneList.value = allMilestones.filter(item => item.project_id === currentProjectId)
      console.log('当前项目节点数量:', milestoneList.value.length)
      console.log('节点数据:', milestoneList.value)
    } else {
      // 加载所有节点
      const response = await getProjectMilestoneList({ page: 1, pageSize: 1000 })
      if (response.data && response.data.data) {
        milestoneList.value = response.data.data
      } else if (Array.isArray(response.data)) {
        milestoneList.value = response.data
      } else {
        milestoneList.value = []
      }
    }
  } catch (error) {
    ElMessage.error('加载项目节点失败')
    console.error('加载项目节点失败:', error)
    milestoneList.value = []
  } finally {
    loading.value = false
  }
}

// 项目选择变化
function handleProjectChange() {
  loadProjectMilestone()
}

// 刷新数据
function refreshData() {
  loadProjectMilestone()
}

// 处理节点名称变化
function handleMilestoneNameChange(value) {
  if (value) {
    const selectedMilestone = predefinedMilestones.find(item => item.milestone_name === value)
    if (selectedMilestone && !form.value.remark) {
      form.value.remark = selectedMilestone.description
    }
  }
}

// 快速添加常用节点
async function addCommonMilestones() {
  const currentProjectId = props.projectData.project_id || props.projectId || selectedProject.value
  if (!currentProjectId || currentProjectId === 'all') {
    ElMessage.warning('请先选择项目')
    return
  }

  try {
    const commonMilestones = [
      '项目启动会',
      '项目开工日期', 
      '开发完成',
      '测试完成',
      '软件部署',
      '项目验收',
      '项目结束'
    ]

    let successCount = 0
    for (const milestoneName of commonMilestones) {
      const milestone = predefinedMilestones.find(item => item.milestone_name === milestoneName)
      if (milestone) {
        try {
          await createProjectMilestone({
            project_id: currentProjectId,
            milestone_name: milestone.milestone_name,
            expected_date: '',
            actual_date: '',
            remark: milestone.description
          })
          successCount++
        } catch (error) {
          console.error(`创建节点失败: ${milestoneName}`, error)
        }
      }
    }

    if (successCount > 0) {
      ElMessage.success(`已成功添加${successCount}个常用节点`)
      loadProjectMilestone()
    } else {
      ElMessage.warning('没有成功添加任何节点')
    }
  } catch (error) {
    console.error('快速添加常用节点失败:', error)
    ElMessage.error('快速添加失败，请重试')
  }
}

// 打开对话框
function openDialog(milestone = null) {
  if (milestone) {
    form.value = { ...milestone }
  } else {
    form.value = {
      id: null,
      project_id: props.projectData.project_id || props.projectId || (selectedProject.value === 'all' ? '' : selectedProject.value),
      milestone_name: predefinedMilestones.length > 0 ? predefinedMilestones[0].milestone_name : '',
      expected_date: '',
      actual_date: '',
      remark: predefinedMilestones.length > 0 ? predefinedMilestones[0].description : ''
    }
  }
  dialogVisible.value = true
}

// 提交表单
async function handleSubmit() {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    if (form.value.id) {
      // 更新
      await updateProjectMilestone(form.value.id, form.value)
      ElMessage.success('节点更新成功')
    } else {
      // 创建
      await createProjectMilestone(form.value)
      ElMessage.success('节点创建成功')
    }
    
    dialogVisible.value = false
    loadProjectMilestone()
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('操作失败，请重试')
  } finally {
    submitLoading.value = false
  }
}

// 更新进度
function updateProgress(milestone) {
  progressForm.value = {
    id: milestone.id,
    milestone_name: milestone.milestone_name,
    actual_date: milestone.actual_date || '',
    status: milestone.actual_date ? 'completed' : 'in_progress',
    remark: milestone.remark || ''
  }
  progressDialogVisible.value = true
}

// 提交进度更新
async function handleProgressSubmit() {
  if (!progressFormRef.value) return
  
  try {
    await progressFormRef.value.validate()
    submitLoading.value = true
    
    const updateData = {
      ...progressForm.value,
      actual_date: progressForm.value.status === 'completed' ? progressForm.value.actual_date : null
    }
    
    await updateProjectMilestone(progressForm.value.id, updateData)
    ElMessage.success('进度更新成功')
    
    progressDialogVisible.value = false
    loadProjectMilestone()
  } catch (error) {
    console.error('更新进度失败:', error)
    ElMessage.error('更新失败，请重试')
  } finally {
    submitLoading.value = false
  }
}


// 删除节点
async function handleDelete(id) {
  try {
    await ElMessageBox.confirm('确定要删除这个节点吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await deleteProjectMilestone(id)
    ElMessage.success('删除成功')
    loadProjectMilestone()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  }
}

// 分页处理
function handleSizeChange(newSize) {
  pagination.value.pageSize = newSize
  pagination.value.page = 1
}

function handleCurrentChange(newPage) {
  pagination.value.page = newPage
}

// 监听项目数据变化
watch(() => props.projectData, (newProjectData) => {
  if (newProjectData && newProjectData.project_id) {
    if (dialogVisible.value && !form.value.project_id) {
      form.value.project_id = newProjectData.project_id
    }
    loadProjectMilestone()
  }
}, { deep: true })

// 监听项目ID变化
watch(() => props.projectId, (newProjectId) => {
  if (newProjectId) {
    console.log('项目ID变化，重新加载项目节点:', newProjectId)
    loadProjectMilestone()
  }
})

// 页面初始化
onMounted(async () => {
  try {
    await loadProjectList()
    await loadProjectMilestone()
  } catch (error) {
    console.error('项目节点页面初始化失败:', error)
  }
})
</script>

<style scoped>
.milestone-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.milestone-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.title-section {
  flex: 1;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 24px;
  color: #f56c6c;
}

.description {
  margin: 0;
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
}

.create-btn, .refresh-btn, .add-common-btn {
  padding: 12px 20px;
  font-weight: 500;
  border-radius: 8px;
}

.project-selector {
  margin-bottom: 20px;
}

.search-section {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}

.search-input {
  flex: 1;
  max-width: 300px;
}

.milestone-table {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.pagination-section {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.milestone-stats {
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
}

.stat-content {
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background: #f5f7fa !important;
  font-weight: 600;
}
</style>
   
<style scoped>
.milestone-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.milestone-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.title-section {
  flex: 1;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 24px;
  color: #f56c6c;
}

.description {
  margin: 0;
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
}

.create-btn {
  padding: 12px 20px;
  font-weight: 500;
  border-radius: 8px;
}

.project-selector {
  margin-bottom: 20px;
}

.milestone-table {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.milestone-stats {
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
}

.stat-content {
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background: #f5f7fa !important;
  font-weight: 600;
}
</style> 